import React from 'react';
import { Form, Input, Modal, message, Select } from 'antd';
import Api from 'Utils/api';
import { EMERGENCY_LEVEL } from 'Constants/emergenceLevel';

const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;
const AddForm = Form.create()(
  (props) => {
    const { form, initialValue } = props;
    const { getFieldDecorator } = form;

    return (
      <Form>
        <FormItem
          label="事件等级:"
        >
          {
            getFieldDecorator('event_level', {
              initialValue: initialValue.event_level ? initialValue.event_level.toString() : undefined,
              rules: [
                { required: true, message: '请选择' }
              ]
            })(
              <Select placeholder="请选择事件等级" style={{ width: 600 }} >
                {
                  EMERGENCY_LEVEL.map(item => (
                    <Option key={item.id} value={item.id.toString()}>{item.name}</Option>
                  ))
                }
              </Select>
            )
          }
        </FormItem>
        <FormItem
          label="处理方式:"
        >
          {
            getFieldDecorator('treatment', {
              initialValue: initialValue ? initialValue.treatment : '',
              rules: [
                { required: true, message: '请输入' }
              ]
            })(
              <TextArea placeholder="请输入处理方式" rows={4} style={{ width: 600, height: 150 }} />
            )
          }
        </FormItem>
      </Form>
    );
  }
);

class EditModal extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      loading: false,
      isAdd: false,
      record: ''
    };
  }

  showModal(record) {
    this.setState({
      visible: true,
      record: record
    }, () => {
      this.form.resetFields();
    });
    if (!record.id) {
      this.setState({ isAdd: true });
    } else {
      this.setState({ isAdd: false });
    }
  }

  close() {
    this.setState({
      loading: false,
      visible: false,
    });
  }
  handleOk() {
    this.form.validateFieldsAndScroll((err) => {
      if (!err) {
        this.setState({ loading: true });
        const { isAdd } = this.state;
        const formValue = this.form.getFieldsValue();
        const currentValue = isAdd ? {} : this.state.record;
        let newRecord = { ...currentValue, ...formValue };
        const self = this;
        if (!isAdd) {
          const editApi = new Api({
            method: 'PATCH',
            path: `/emergencies/${this.state.record.id}`,
            data: newRecord,
            success: () => {
              this.props.onOk(newRecord);
              self.close();
            },
            error: (msg) => {
              message.error(msg);
              this.setState({ loading: false });
            }
          });
          editApi.run();
        } else {
          const addApi = new Api({
            method: 'POST',
            path: '/emergencies',
            data: newRecord,
            success: (json) => {
              newRecord = { ...json };
              this.props.onOk(newRecord);
              self.close();
            },
            error: (msg) => {
              message.error(msg);
              this.setState({ loading: false });
            }
          });
          addApi.run();
        }
      }
    });
  }

  render() {
    const title = this.state.isAdd ? '新增' : '修改';
    return (
      <div>
        <Modal
          title={`${title}应急处理事件`}
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={() => {
            this.close();
          }}
          confirmLoading={this.state.loading}
          className="small-modal"
        >
          <AddForm
            initialValue={this.state.record ? this.state.record : ''}
            ref={(ref) => { this.form = ref; }}
          />
        </Modal>
      </div>
    );
  }
}

export default EditModal;
